<template>
  <div style="margin-left:40px">
    <div class="font-family-h font-bold margin-t40 margin-b40">
      <i class="square"></i>VIP会员海报
    </div>
    <el-button type="primary" @click="addInfo(1)">添加</el-button>

    <el-table :data="VIPList" border style="width: 100%">
      <el-table-column align="center" label="海报图片" width="180">
        <template slot-scope="scope">
          <img
            style="height:200px;width:120px;margin:0 auto"
            v-if="scope.row.url"
            :src="scope.row.url"
          />
          <el-button size="mini" type="primary" @click="getIndex(scope.$index,scope.row.type)">点击上传</el-button>
        </template>
      </el-table-column>
      <el-table-column align="center" label="邀请语1" width="180">
        <template slot-scope="scope">
          <el-input v-model="scope.row.inviteWord1 "></el-input>
        </template>
      </el-table-column>
      <el-table-column align="center" label="邀请语2" width="180">
        <template slot-scope="scope">
          <el-input v-model="scope.row.inviteWord2 "></el-input>
        </template>
      </el-table-column>
      <el-table-column align="center" label="图片文案">
        <template slot-scope="scope">
          <el-input
            type="textarea"
            v-for="(item,index) in scope.row.copy"
            :key="index"
            style="width:200px"
            :rows="5"
            placeholder="请输入内容"
            v-model="item.title"
          ></el-input>
          <br />
          <br />
          <el-button size="mini" type="primary" @click="goAdd(scope.$index,scope.row.type)">添加文案</el-button>
        </template>
      </el-table-column>
      <el-table-column align="center" label="操作" width="100">
        <template slot-scope="scope">
          <el-button size="mini" type="danger" @click="deleteInfo(scope.$index,VIPList)">删除</el-button>
        </template>
      </el-table-column>
    </el-table>

    <div class="font-family-h font-bold margin-t40 margin-b40">
      <i class="square"></i>主题海报
    </div>
    <el-button type="primary" @click="addInfo(3)">添加</el-button>
    <el-table :data="primaryList" border style="width: 100%">
      <el-table-column align="center" label="海报图片" width="180">
        <template slot-scope="scope">
          <img
            style="height:200px;width:120px;margin:0 auto"
            v-if="scope.row.url"
            :src="scope.row.url"
          />
          <el-button size="mini" type="primary" @click="getIndex(scope.$index,scope.row.type)">点击上传</el-button>
        </template>
      </el-table-column>
      <el-table-column align="center" label="邀请语1" width="180">
        <template slot-scope="scope">
          <el-input v-model="scope.row.inviteWord1 "></el-input>
        </template>
      </el-table-column>
      <el-table-column align="center" label="邀请语2" width="180">
        <template slot-scope="scope">
          <el-input v-model="scope.row.inviteWord2 "></el-input>
        </template>
      </el-table-column>
      <el-table-column align="center" label="图片文案">
        <template slot-scope="scope">
          <el-input
            type="textarea"
            v-for="(item,index) in scope.row.copy"
            :key="index"
            style="width:200px"
            :rows="5"
            placeholder="请输入内容"
            v-model="item.title"
          ></el-input>
          <br />
          <br />
          <el-button size="mini" type="primary" @click="goAdd(scope.$index,scope.row.type)">添加文案</el-button>
        </template>
      </el-table-column>
      <el-table-column align="center" label="操作" width="100">
        <template slot-scope="scope">
          <el-button size="mini" type="danger" @click="deleteInfo(scope.$index,primaryList)">删除</el-button>
        </template>
      </el-table-column>
    </el-table>

    <div class="font-family-h font-bold margin-t40 margin-b40">
      <i class="square"></i>邀请代理商海报
    </div>
    <el-button type="primary" @click="addInfo(2)">添加</el-button>
    <el-table :data="inviteList" border style="width: 100%">
      <el-table-column align="center" label="海报图片" width="180">
        <template slot-scope="scope">
          <img
            style="height:200px;width:120px;margin:0 auto"
            v-if="scope.row.url"
            :src="scope.row.url"
          />
          <el-button size="mini" type="primary" @click="getIndex(scope.$index,scope.row.type)">点击上传</el-button>
        </template>
      </el-table-column>
      <el-table-column align="center" label="邀请语1" width="180">
        <template slot-scope="scope">
          <el-input v-model="scope.row.inviteWord1 "></el-input>
        </template>
      </el-table-column>
      <el-table-column align="center" label="邀请语2" width="180">
        <template slot-scope="scope">
          <el-input v-model="scope.row.inviteWord2 "></el-input>
        </template>
      </el-table-column>
      <el-table-column align="center" label="图片文案">
        <template slot-scope="scope">
          <el-input
            type="textarea"
            v-for="(item,index) in scope.row.copy"
            :key="index"
            style="width:200px"
            :rows="5"
            placeholder="请输入内容"
            v-model="item.title"
          ></el-input>
          <br />
          <br />
          <el-button size="mini" type="primary" @click="goAdd(scope.$index,scope.row.type)">添加文案</el-button>
        </template>
      </el-table-column>
      <el-table-column align="center" label="操作" width="100">
        <template slot-scope="scope">
          <el-button size="mini" type="danger" @click="deleteInfo(scope.$index,inviteList)">删除</el-button>
        </template>
      </el-table-column>
    </el-table>

    <div class="font-family-h font-bold margin-t40 margin-b40">
      <i class="square"></i>爆品海报
    </div>
    <el-button type="primary" @click="showCourse = true">选择课程</el-button>

    <el-table :data="courseList" border style="width: 100%">
      <el-table-column align="center" label="海报图片" width="180">
        <template slot-scope="scope">
          <el-upload
            class="upload-demo"
            :action="imageUploadUrl"
            :on-remove="courseRemove"
            :on-success="courseSuccess"
            name="avatar"
            :file-list="scope.row.url"
            list-type="picture"
          >
            <el-button
              size="small"
              type="primary"
              @click="getIndex(scope.$index,scope.row.type)"
            >点击上传</el-button>
          </el-upload>
        </template>
      </el-table-column>
      <el-table-column align="center" label="邀请语1" width="180">
        <template slot-scope="scope">
          <el-input v-model="scope.row.inviteWord1 "></el-input>
        </template>
      </el-table-column>
      <el-table-column align="center" label="邀请语2" width="180">
        <template slot-scope="scope">
          <el-input v-model="scope.row.inviteWord2 "></el-input>
        </template>
      </el-table-column>
      <el-table-column align="center" label="爆品主标题" width="220">
        <template slot-scope="scope">
          <el-input v-model="scope.row.title" placeholder="请输入爆品主标题"></el-input>
        </template>
      </el-table-column>
      <el-table-column align="center" label="爆品副标题" width="220">
        <template slot-scope="scope">
          <el-input v-model="scope.row.intro" placeholder="请输入爆品副标题"></el-input>
        </template>
      </el-table-column>

      <el-table-column align="center" label="图片文案">
        <template slot-scope="scope">
          <el-input
            type="textarea"
            v-for="(item,index) in scope.row.copy"
            :key="index"
            style="width:200px"
            :rows="5"
            placeholder="请输入内容"
            v-model="item.title"
          ></el-input>
          <br />
          <br />
          <el-button size="mini" type="primary" @click="goAdd(scope.$index,scope.row.type)">添加文案</el-button>
        </template>
      </el-table-column>
      <el-table-column align="center" label="操作" width="100">
        <template slot-scope="scope">
          <el-button size="mini" type="danger" @click="deleteInfo(scope.$index,courseList)">删除</el-button>
        </template>
      </el-table-column>
    </el-table>
    <el-button style="margin-top:20px" type="primary" @click="save()">保存</el-button>

    <el-dialog title="编辑图片" :visible.sync="editImg" width="30%">
      <el-upload
        :action="imageUploadUrl"
        :show-file-list="false"
        :before-upload="handleBeforeUpload"
        list-type="picture-card"
        name="avatar"
        :on-success="handleBannerSuccess"
      >
        <img v-if="uploadImg" :src="uploadImg" class="avatar" />
        <i v-else class="el-icon-plus avatar-uploader-icon"></i>
      </el-upload>
      <span slot="footer" class="dialog-footer">
        <el-button @click="editImg = false">取 消</el-button>
        <el-button type="primary" @click="dialogVisible = false">确 定</el-button>
      </span>
    </el-dialog>

    <el-dialog title="提示" :visible.sync="showCourse" width="60%">
      <span>请选择课程</span>
      <el-table :data="courseData" border style="width: 100%">
        <el-table-column prop="name" label="课程名称" width="200"></el-table-column>
        <el-table-column prop="parentCatName" label="分类" width="200"></el-table-column>
        <el-table-column label="操作" width="100">
          <template slot-scope="scope">
            <el-button @click="confrimCourse(scope.row)" type="primary" size="mini">选择</el-button>
          </template>
        </el-table-column>
      </el-table>
    </el-dialog>
  </div>
</template>
<script>
import { generalize, generalizeList } from "@/api/company";
import { getCourseList } from "@/api/course";
export default {
  data() {
    return {
      imageUploadUrl: process.env.BASE_API + "/common/activities/imageUpload",
      courseList: [],
      primaryList: [],
      VIPList: [],
      inviteList: [],
      editImg: false,
      index: "",
      type: "",
      uploadImg: "",
      courseData: [],
      showCourse: false
    };
  },
  methods: {
    courseSuccess(response, file, fileList) {
      console.log(this.index);
      if (response.statusCode == 200) {
        var array = this.courseList[this.index].url;
        if (typeof array == "string" || array == null) {
          this.courseList[this.index].url = [];
        }
        this.courseList[this.index].url.push({
          url: response.data.imageUrl,
          name: file.name
        });

        this.$message({
          message: "上传成功!",
          type: "info"
        });
      } else {
        this.$message({
          message: "上传失败，请稍候再试!",
          type: "info"
        });
      }
    },
    courseRemove(file, fileList) {
      console.log(file, fileList);
      for (let i = 0; i < this.courseList.length; i++) {
        const element = this.courseList[i].url;
        for (let j = 0; j < element.length; j++) {
          const url = element[j].url;
          if (file.url == url) {
            element.splice(j, 1);
          }
        }
      }
    },
    save() {
      for (let i = 0; i < this.inviteList.length; i++) {
        const element = this.inviteList[i];
        element.link = "homePage/agent/agentIndex";
      }
      for (let j = 0; j < this.primaryList.length; j++) {
        const element = this.primaryList[j];
        element.link = "";
      }
      for (let j = 0; j < this.VIPList.length; j++) {
        const element = this.VIPList[j];
        element.link = "member/vip/vipIndex";
      }
      var obj = {
        data: this.VIPList.concat(this.inviteList)
          .concat(this.primaryList)
          .concat(this.courseList)
      };
      console.log(obj);
      // return;
      generalize(obj).then(res => {
        this.$message({
          message: res.data.data,
          type: "info"
        });
      });
    },
    addInfo(val) {
      var obj = {
        url: "",
        copy: [{ title: "" }],
        type: val
      };
      if (val == 1) {
        obj.link = "member/vip/vipIndex";
        this.VIPList.unshift(obj);
      } else if (val == 2) {
        obj.link = "homePage/agent/agentIndex";
        this.inviteList.unshift(obj);
      } else if (val == 3) {
        obj.link = "";
        this.primaryList.unshift(obj);
      }
    },
    deleteInfo(index, rows) {
      rows.splice(index, 1);
    },
    goAdd(index, type) {
      console.log(type);
      if (type == 1) {
        //vip
        if (this.VIPList[index].copy == null) {
          this.VIPList[index].copy = [];
        }
        this.VIPList[index].copy.push({ title: "" });
      } else if (type == 2) {
        //代理商
        if (this.inviteList[index].copy == null) {
          this.inviteList[index].copy = [];
        }
        this.inviteList[index].copy.push({ title: "" });
      } else if (type == 3) {
        //主题
        if (this.primaryList[index].copy == null) {
          this.primaryList[index].copy = [];
        }
        this.primaryList[index].copy.push({ title: "" });
      } else if (type == 4) {
        //课程
        if (this.courseList[index].copy == null) {
          this.courseList[index].copy = [];
        }
        this.courseList[index].copy.push({ title: "" });
      }
    },
    handleBeforeUpload(file) {
      console.log("上传文件之前触发啊、。。。");
      const isImg = file.type == "image/jpeg" || file.type == "image/png";
      if (!isImg) {
        this.$message.warning("上传图片只能是 JPG 或 PNG 格式");
      }
      const isLt3M = file.size / 1024 / 1024 < 3;
      if (!isLt3M) {
        this.$message.error("上传图片大小不能超过 3MB!");
      }
      return isImg && isLt3M;
    },
    getIndex(index, type) {
      this.index = index;
      this.type = type;
      if (this.type == 1) {
        //vip
        this.uploadImg = this.VIPList[this.index].url;
      } else if (this.type == 2) {
        //代理商
        this.uploadImg = this.inviteList[this.index].url;
      } else if (this.type == 3) {
        //主题
        this.uploadImg = this.primaryList[this.index].url;
      } else if (this.type == 4) {
        //课程
        this.uploadImg = this.courseList[this.index].url;
      }

      if (type !== 4) {
        this.editImg = true;
      }
    },
    handleBannerSuccess(response, file, fileList) {
      if (response.statusCode == 200) {
        this.uploadImg = response.data.imageUrl;
        console.log(response.data.imageUrl);

        if (this.type == 1) {
          //vip
          this.VIPList[this.index].url = response.data.imageUrl;
        } else if (this.type == 2) {
          //代理商
          this.inviteList[this.index].url = response.data.imageUrl;
        } else if (this.type == 3) {
          //主题
          this.primaryList[this.index].url = response.data.imageUrl;
        } else if (this.type == 4) {
          //课程
          this.courseList[this.index].url = response.data.imageUrl;
        }
        this.editImg = false;
        this.$message({
          message: "上传成功!",
          type: "info"
        });
      } else {
        this.$message({
          message: "上传失败，请稍候再试!",
          type: "info"
        });
      }
    },
    confrimCourse(val) {
      var obj = {
        typeId: val.courseId,
        name: val.name,
        url: "",
        title: "",
        intro: "",
        copy: [{ title: "" }],
        type: 4,
        link: "homePage/course/courseDetail&courseId=" + val.courseId
      };
      this.courseList.push(obj);

      this.showCourse = false;
    },
    getCourseData() {
      getCourseList().then(res => {
        this.courseData = res.data.data.list.data;
      });
    },
    getData() {
      generalizeList().then(res => {
        if (res.data.data.explosive !== undefined) {
          this.courseList = res.data.data.explosive;
        }
        if (res.data.data.theme !== undefined) {
          this.primaryList = res.data.data.theme;
          console.log(2);
        }
        if (res.data.data.vip !== undefined) {
          this.VIPList = res.data.data.vip;
          console.log(3);
        }
        if (res.data.data.agency !== undefined) {
          this.inviteList = res.data.data.agency;
          console.log(4);
        }
      });
    }
  },
  watch: {},
  mounted() {
    this.getData();
    this.getCourseData();
  }
};
</script>
